<template>
  <div class="app">
    <div class="login-box">
      <div style="height: 30px; margin-bottom: 30px; margin-top: 10px;">
        <h2 style="text-align: center; margin: 0;">TPSHION-DEVOPS</h2>
      </div>
      <div style="height: 65px; padding-left: 10px; padding-right: 10px;">
        <el-input
          class="w-50 m-2"
          v-model="form.username"
          placeholder="帐号"
          :prefix-icon="User"
        />
      </div>
      <div style="height: 65px; padding-left: 10px; padding-right: 10px;">
        <el-input
          class="w-50 m-2"
          v-model="form.password"
          placeholder="密码"
          :prefix-icon="Lock"
          type="password"
          show-password
        />
      </div>
      <div style="display: flex; justify-content: center;">
        <el-button style="width: 330px;" type="primary" @click="handleLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { LoginData } from '../model/LoginModel'
import { login } from '../api/LoginApi'
import { ElLoading } from 'element-plus'

const form = ref<LoginData>({
  username:'',
  password:''
})

const router = useRouter()

const handleLogin = async () =>{
  const loading = getLoading('登录中...')
  try{
    const rs = await login(form.value)
    if(rs.code == '200'){
      router.push({
        path: '/'
      })
    }
  }finally{
    loading.close()
  }
}

const getLoading = (msg:string):any  =>{
  return ElLoading.service({
    lock: true,
    text: msg,
    background: 'rgba(0, 0, 0, 0.7)',
  })
}

</script>

<style lang="less" scoped>
.app{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;

  .login-box{
    height: 250px;
    width: 350px;
    padding: 10px;
    border-radius: 8px;
    margin-top: 15%;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
}
</style>